<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>自动气象站数据实时信息发布系统</title>

    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico" th:href="@{/favicon.ico}">
    <link href="css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" th:href="@{/css/font-awesome.min.css?v=4.4.0}" rel="stylesheet">
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
    <link rel="stylesheet" href="../../static/css/jquery.searchableSelect.css" th:href="@{/css/jquery/jquery.searchableSelect.css}" >

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css"  th:href="@{/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
    <script src="js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}" ></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js" th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js" th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
    <script src="js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}" ></script>
    <script src="/static/js/jquery.searchableSelect.js"  th:src="@{/js/jquery/jquery.searchableSelect.js}"></script>

    <!-- 第三方插件 -->
<!--    <script src="js/plugins/pace/pace.min.js" th:src="@{/js/plugins/pace/pace.min.js}"></script>-->
<!--    /Users/zzw/文档/前端模板/Inspinia_admin/js/plugins/pace/pace.min.js-->
    <script src="../static/js/jquery-ui.custom.min.js" th:src="@{/js/jquery-ui.custom.min.js}" ></script>
    <script src="../static/js/jquery-ui-1.10.4.min.js" th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>

    <!-- 自定义js -->
    <script src="js/hAdmin.js?v=4.1.0" th:src="@{/js/hAdmin.js?v=4.1.0}"></script>
<!--    <script src="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" th:src="@{http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css}"></script>-->
<!--    <script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" th:src="@{http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js}"></script>-->

<!--    1000-->

    <script src="js/plugins/jeditable/jquery.jeditable.js" th:src="@{/js/plugins/jeditable/jquery.jeditable.js}" ></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.js" th:src="@{/js/plugins/dataTables/jquery.dataTables.js}" ></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js" th:src="@{/js/plugins/dataTables/dataTables.bootstrap.js}" ></script>

    <!-- 自定义js -->

    <!--    2000-->
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
    <!--左侧导航开始-->
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="nav-close"><i class="fa fa-times-circle"></i>
        </div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                                    <i class="fa fa-area-chart block m-t-xs" style="font-size:20px;"></i>

                                    <span class="block m-t-xs" style="font-size:20px;">
                                        <strong class="font-bold">自动气象站数据</strong>
                                    </span>
                                    <span class="block m-t-xs" style="font-size:20px;">
                                        <strong class="font-bold">实时信息发布系统</strong>
                                    </span>
                                </span>
                        </a>
                    </div>
                    <div class="logo-element">hAdmin
                    </div>
                </li>
                <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                    <span class="ng-scope">分类</span>
                </li>

            </ul>
        </div>
    </nav>

    <!--    <div th:replace="include/left_navigation_bar::left_navigation_bar_style"></div>-->
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">

        <!--头部导航开始-->
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-info " href="#"><i class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                        <div class="form-group"></div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown">
                    		<span class="user-info">
							</span>
                        </a>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" onclick="toLogin()" data-toggle="dropdown">
                            <i class="fa fa-sign-out"></i> 去登录
                        </a>
                    </li>

                </ul>
            </nav>
        </div>
        <!--头部导航结束-->
        <div class="row J_mainContent" id="content-main">
            <div class="col-sm-12" >
                <div class="ibox-title">
                    <h5>气象数据查询</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label class="col-sm-1 control-label">城市：</label>
                <div class="col-sm-3">
                    <select id="cityId" name="cityId">
                        <option th:each="l:${citys}" th:value="${l.id}"   th:text="${l.name}"></option>
                    </select>
                </div>
                <div class="col-sm-5"></div>
<!--                <button class="btn btn-primary" onclick="RefreshTable()" type="button">-->
                <button class="btn btn-primary" onclick="dataTable2()" type="button">
                    <i class="fa fa-check"></i>&nbsp;查询
                </button>
            </div>


            <table id="data_table_name_list" class="table table-striped table-bordered table-hover dataTables-example" >
                <thead>
                    <tr>
                        <th> id</th>
                        <th> 城市</th>
                        <th> 天气</th>
                        <th> 气温</th>
                        <th> 气压</th>
                        <th> 风力</th>
                        <th> 风向</th>
                        <th> 湿度</th>
                        <th> 修改时间</th>
<!--                        <th> 操作</th>-->
                    </tr>
                </thead>
            </table>


        </div>
    </div>
    <!--右侧部分结束-->
</div>



<script>
    $(document).ready( function () {
        $(function(){
            $("#cityId").searchableSelect();
        });
        // 表单初始化
        dataTableInit();
    } );

    function toLogin(){
        window.location.href = "/login";
    }


    function dataTable2(){
        let table = $("#data_table_name_list").dataTable();
        table.fnClearTable(); //清空一下table
        table.fnDestroy(); //还原初始化了的datatable
        dataTableInit();
    }

    function dataTableInit(){
        let reqUrl = "/meteorologicalData/findAllByCity?cityId="+$("#cityId").val();
        $('#data_table_name_list').DataTable({
            "processing":true,
            "serverSide":false,
            "pageLength": 10,  //首次加载的数据条数
            "ordering": false, //排序操作在服务端进行，所以可以关了。
            "paging":true,
            "pagingType": "full_numbers",
            "searching": false,//禁用搜索
            "ajax":{
                "url":reqUrl,
                "type":"get"
            },
            "columns":[
                {"data":'id'},
                {"data":'city'},
                {"data":'weather'},
                {"data":'airTemperature'},
                {"data":'pressure'},
                {"data":'windPower'},
                {"data":'windDirection'},
                {"data":'humidity'},
                {"data":'updateTime',
                    render : function (data,type,row) {
                        let d = new Date(data);
                        let date = (d.getFullYear()) + "-" +
                            (d.getMonth() + 1) + "-" +
                            (d.getDate()) + " " +
                            (d.getHours()) + ":" +
                            (d.getMinutes()) + ":" +
                            (d.getSeconds());
                        return date;
                    }
                }
            ],
        });
    }

    //刷新数据,方法无须更改可以直接复用
    function RefreshTable(){
        let cityId = $("#cityId").val();
        let urlData = "/meteorologicalData/findAllByCity?cityId="+cityId;
        $.getJSON(urlData, null, function( json )
        {
           let table = $("#data_table_name_list").dataTable();
           let oSettings = table.fnSettings();
            table.fnClearTable(this);//动态刷新关键部分语句，只会根据后台数据有变化才会刷新
            for (var i=0; i<json.length; i++)
            {
                table.oApi._fnAddData(oSettings, json[i]);//注意取得的jason串的字符数量，要与html中列的数量要有对应
            }
            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
            table.fnDraw();
        });
    }
</script>
<div style="text-align:center;"></div>


</body>

</html>
